<template>
    <div class="ps-bz-details">
        <section class="headBtn2">
            <div :class="{ active: isActive1==1 }" @click="changeActive1(1)">
                <span>总览</span>
            </div>
            <div :class="{ active: isActive1==2 }" @click="changeActive1(2)">
                <span>泵房</span>
            </div>
            <div :class="{ active: isActive1==3 }" @click="changeActive1(3)">
                <span>水池</span>
            </div>
        </section>
        <zonglan v-if="isActive1==1"/>
        <bengfang v-if="isActive1==2"/>
        <shuichi v-if="isActive1==3"/>

    </div>
</template>

<script>
import zonglan from "./details/zonglan";
import bengfang from "./details/bengfang";
import shuichi from "./details/shuichi";

export default {
    data() {
        return {
            isActive1: 1,
            isActive2: 1,
            detailsList: [],
            siteIdData: {
                in: '',
                out: ''
            },
            water: {

            },
            videoList: [],
            mapId: {
                x: '120.222744',
                y: '30.191123'
            }
        };
    },
    components:{
        zonglan,bengfang,shuichi
    },
    // mounted() {
    //     this.getDetailsList(() => {
    //         this.getDetailsIn()
    //         this.getDetailsOut()
    //         this.getWatertimeList()
    //     })
    //     this.select()
    //     this.getMap()
    //     this.getVideoList()
    //     // this.getWatertimeList()
    // },
    methods: {
        changeActive1(num) {
            this.isActive1 = num
        },
        changeActive2(num) {
            this.isActive2 = num
        },
        // //获取出水点和进水点位id
        // getDetailsList(callback) {
        //     this.$api.wushuichangjiance.detailsList({
        //         siteId: this.$route.query.id,
        //     }).then(res => {
        //         if (res.success) {
        //             this.siteIdData.in = res.data.listIn[0].siteId
        //             this.siteIdData.out = res.data.listOut[0].siteId
        //             callback()
        //         }
        //     });
        // },
        // //获取进水详情
        // getDetailsIn() {
        //     this.$api.wushuichangjiance.detailsIn({
        //         id: this.siteIdData.in
        //     }).then(res => {
        //         if (res.success) {
        //             this.water = res.data
        //         }
        //     });
        // },
        // //获取出水详情
        // getDetailsOut() {
        //     this.$api.wushuichangjiance.detailsOut({
        //         id: this.siteIdData.out
        //     }).then(res => {
        //         if (res.success) {
        //             this.water = res.data
        //         }
        //     });
        // },
        // //获取对应视频列表
        // getVideoList() {
        //     this.$api.wushuichangjiance.videoList({
        //         id: this.$route.query.id
        //     }).then(res => {
        //         if (res.success) {
        //             this.videoList = res.data.list1
        //         }
        //     });
        // },
        // //获取echart数据
        // select() {
        //     let myChart = echarts.init(this.$refs.echartContainer);
        //     // myChart.resize()
        //     // this.getEveryDayEvent(() => {
        //     myChart.setOption({
        //         title: {
        //             // text: '某地区蒸发量和降水量',
        //             // subtext: '纯属虚构'
        //         },
        //         tooltip: {
        //             trigger: 'axis'
        //         },
        //         legend: {
        //             data: ['实时', '昨日']
        //         },
        //         toolbox: {
        //             show: true
        //         },
        //         calculable: true,
        //         grid: { // 控制图的大小，调整下面这些值就可以，
        //             x: 40,
        //             x2: 20,
        //             y2: 30 // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
        //         },
        //         xAxis: [
        //             {
        //                 type: 'category',
        //                 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        //             }
        //         ],
        //         yAxis: [
        //             {
        //                 type: 'value'
        //             }
        //         ],
        //         series: [
        //             {
        //                 name: '实时',
        //                 type: 'line',
        //                 data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        //             },
        //             {
        //                 name: '昨日',
        //                 type: 'line',
        //                 data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        //             }
        //         ]
        //     });
        //     // });
        // },
        // getMap() {
        //     var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
        //     var point = new BMap.Point(this.mapId.x, this.mapId.y); //定义一个中心点坐标
        //     map.centerAndZoom(point, 18); //设定地图的中心点和坐标并将地图显示在地图容器中
        // },
        // toMap() {
        //     console.log('aaa')
        //     this.$router.push({ path: '/bigmap', query: { x: this.mapId.x, y: this.mapId.y } })
        // },
        // //水量时间列表
        // getWatertimeList() {
        //     this.$api.wushuichangjiance.watertime({
        //         id: this.siteIdData.in
        //     }).then(res => {
        //         if (res.success) {
        //             // this.videoList = res.data.list1
        //         }
        //     });
        // },
    }
}
</script>

<style>
</style>
